@charset "utf-8";
.block {position:fixed;left:0;top:0;width:100%;height:100%;z-index:50000; background:#b5b5b5;opacity:.7;}
.dialog {position:absolute;left:0;z-index:50010; width:100%;}

.face{float:left}
.face img{float:none}
.face p{text-align:center}

.change-face{display:none; cursor:pointer}

.change-face-camera-tip {position:fixed; top:5px; left:365px; z-index:50005; background:url(../img/ui-face-cam-tip.png); width:34px; height:85px; display:none}

.change-face-layer .dialog-close, .recommend .save-recommend, .file-open a, .shutter, .change-face-layer .cut a{background:url(../img/ui-face.png)}

.change-face-layer{width:738px; height:521px; margin:auto; background:#fff; box-shadow:0 0 5px rgba(0, 0, 0, .3); position:relative; display:none; font-family:'宋体'}
.change-face-layer .dialog-close{position:absolute; top:15px; right:21px; width:15px; height:15px; text-indent:-9999px; background-position:-135px -90px}
.change-face-layer h3{font-family:'Microsoft Yahei'; font-size:18px; color:#666; background:#f7fbfb; border-bottom:1px solid #e4ebec; height:44px; line-height:44px; padding-left:25px}

.change-face-layer .operate{margin:35px 0 0 50px; float:left; width:450px}
.tab-title li{float:left;}
.tab-title li a{float:left; background:#fbfbfb; border:1px solid #e8e8e8; font-family:'宋体'; font-size:14px; color:#777; text-align:center; width:139px; height:36px; line-height:36px; margin-right:-1px; _margin-right:0}
.tab-title li a.active, .tab-title li a:hover{text-decoration:none; background:#fff; border-bottom-color:#fff; border-top-color:#34C61C; font-weight:bold}
.tab-cont{clear:both; padding-top:26px}
.tab-cont > div{display:none}
.tab-cont > div.active{display:block}
.tab-cont div > p{width:420px; text-align:center; clear:both}

.recommend{margin-left:-3px; clear:both}
.recommend img{width:60px; height:60px; float:left; padding:1px; border:2px solid #fff; cursor:pointer; margin:0 24px 26px 0}
.recommend img:hover, .recommend img.active{border-color:#7AC3FF}
.recommend .save-recommend:hover{background-position:0 -45px;}
.recommend .save-recommend, .recommend .save-recommend:active{display:inline-block; width:75px; height:32px; background-position:0 -0px; text-indent:-9999px; margin-top:10px}

.change-face-layer .border{border:1px solid #e8e8e8; background:#fcfcfc; width:419px; height:287px;text-align:center; }

.change-face-layer .upload, .change-face-layer .camera .tips{display:table-cell; height:287px; vertical-align:middle; color:#999; font-size:22px; position:relative}
.change-face-layer .upload.hover{border:1px dashed #39F}
.change-face-layer .upload input{position:absolute; visibility:hidden}
.change-face-layer .upload .format-error{position:absolute; top:50px; opacity:.0; left:50%; margin-left:-99px; background:#D94F38; border:1px solid #E37F6F; padding:0 7px; color:#fff; font-size:12px; /*font-family:'Microsoft Yahei'*/}
.change-face-layer .upload p{margin-bottom:25px}
.change-face-layer .upload .file-open{font-size:14px}
.file-open a:hover{background-position:0 -128px}
.file-open a, .file-open a:active{display:inline-block; width:117px; height:36px; background-position:0 -80px; text-indent:-9999px; vertical-align:middle}

.change-face-layer .camera .tips.nocam{background:url(../img/ui-face-nc.png); text-indent:-9999px; width:419px}
.change-face-layer .camera video{display:none; width:419px; height:287px; background:#000; -webkit-transform:rotateY(180deg); }
.change-face-layer .camera p{text-align:center}
.change-face-layer .camera > div h4, .change-face-layer .camera > div p{text-align:left; margin:10px 30px 10px 50px; line-height:1.5}
.change-face-layer .camera > div h4{font-weight:normal; font-size:14px; color:#494848}
.change-face-layer .camera > div p{font-size:12px; color:#999; width:auto}
.change-face-layer .camera > div p a:hover{text-decoration:underline}
.shutter:hover{background-position:0 -308px}
.shutter, .shutter:active{display:inline-block; width:79px; height:38px; text-indent:-9999px; background-position:0 -260px; margin:25px 0; display:none}

.change-face-layer .cut{ display:none}
.change-face-layer .cut .border{margin-bottom:12px; height:257px}
.change-face-layer .cut canvas{width:419px; height:257px;}
.change-face-layer .cut a{display:inline-block; font-size:12px; line-height:15px}
.change-face-layer .cut .rotate-left{ background-position:-90px -260px; float:left; padding-left:24px}
.change-face-layer .cut .rotate-right{ background-position:-95px -280px; float:right; padding-right:22px}
.change-face-layer .cut .cutbtn{width:75px; height:32px; text-indent:-9999px; margin:18px 20px}

.change-face-layer .cut .save-cut:hover{background-position:0 -45px}
.change-face-layer .cut .save-cut, .change-face-layer .cut .save-cut:active{background-position:0 0}
.change-face-layer .cut .cancel-cut:hover{background-position:-91px -45px}
.change-face-layer .cut .cancel-cut, .change-face-layer .cut .cancel-cut:active{background-position:-91px 0}

.change-face-layer .side{float:left; margin:62px 0 0 60px; color:#999}
.preview{width:120px; line-height:1.8}
.preview > div{text-align:center; margin:15px 0; font-size:12px; font-family:Tahoma, Geneva, sans-serif}
.preview .shadow{border:1px solid #eaeaea; padding:1px; box-shadow:0 0 5px rgba(0, 0, 0, .18); margin:auto; margin-bottom:5px}
.preview canvas{display:none}
.preview .p110, .preview .p110 canvas, .preview .p110 img{width:110px; height:110px}
.preview .p48, .preview .p48 canvas, .preview .p48 img{width:48px; height:48px}

.my-face{display:none}
.my-face img{width:30px; height:30px; margin:6px 6px 0 0; cursor:pointer;padding:1px;border:1px solid #fff}
.my-face img.active{border-color:#7AC3FF}


